<template>
  <div>
    <transition>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <!--<div style="z-index: 98; width: 50px; height: 50px;position: fixed; right: 50px;bottom: 75px;">-->
      <!--<div v-show="memberInfo.no_read_log && memberInfo.no_read_log != '0'" style="color: #fff; position: absolute; top: 0px; right: 3px; width: 18px; height: 18px;text-align: center; background-color: red; border-radius: 50%; z-index: 97;">{{memberInfo.no_read_log}}</div>-->
      <!--<img id="kf" @click="contactCustom" style="z-index: 96; width: 50px; height: 50px;position: fixed; right: 50px;bottom: 75px;" src="http://shop.fjjpny.com/wapnew1/static/images/kf.png"/>-->
    <!--</div>-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        memberInfo: {},
        deviceType: this.$utils.getDeviceType()
      }
    },
    created() {
      this.$request.getMemberInfo().then(data => {
        this.memberInfo = data
      }).catch(e => {
      })
    },
    watch: {
      '$route': function (e) {
        this.$request.getMemberInfo().then(data => {
          this.memberInfo = data
        }).catch(e => {
        })
      }
    },
    mounted() {
      // 检查是否有新版本，有新版本需要及时reload页面，避免本地仍使用旧的index.html
      let alerting = false
      window.setInterval(() => {
        if (alerting) {
          return
        } else {
          this.$request.getAppVersionInfo().then(data => {
            if (parseFloat(data.app_version) > parseFloat(this.$config.versionCode || 0)) {
              alerting = true
              this.$messageBox.alert(data.version_remark, '新版本更新完成').then(() => {
                alerting = false
                console.log('is_refresh', data.is_refresh)
                if (data.is_refresh == '1') {
                  console.log('refresh')
                  window.localStorage.clear()
                  window.sessionStorage.clear()
                  this.$utils.delCookie('key')
                }
                if (this.deviceType == 'wx-Android') {
                  // let webUrl = this.$config.website + '/wap/'
                  // window.location.href = this.$utils.updateUrl(webUrl)
                  window.location.reload(true)
                } else {
                  window.location.reload(true)
                }
              })
            }
          }).catch(e => {
          })
        }
      }, 10000)
    },
    methods: {
      contactCustom() {
        let avatar = ''
        if (this.memberInfo.member_avatar && this.memberInfo.member_avatar.length < 100) {
          avatar = this.memberInfo.member_avatar
        }
        var baseConfig = {
          id: this.memberInfo.member_id,
          url: '/',
          name: this.memberInfo.member_name,
          avatar: avatar,
          group: 1,
          socket: this.$config.socket,
          chatSite: this.$config.chatSite,
          goods_commonid: this.$storage.getCurrentGoodsCommonId() || ''
        }
        console.log('config', baseConfig)
        var kefuDir = this.$config.website + '/wap/static/kefu'
        if (window.location.hostname == 'localhost') {
          kefuDir = 'http://' + window.location.host + '/static/kefu'
        }
        var url = kefuDir + '/mobile.html' + '?group=' + baseConfig.group + '&id=' + baseConfig.id +
          '&name=' + baseConfig.name + '&avatar=' + baseConfig.avatar + '&chatSite=' + baseConfig.chatSite + '&socket=' + baseConfig.socket + '&shopSite=' + this.$config.website + '&goods_commonid=' + baseConfig.goods_commonid
        console.log('url', url)
        window.location.href = url
      }
    }
  }
</script>
<style lang="less">
  .mint-msgbox-btn.mint-msgbox-confirm, .mint-msgbox-btn.mint-msgbox-cancel {
    font-size: 16px;
    color: rgba(227, 193, 67, 1)
  }

  .mint-msgbox-btn.mint-msgbox-confirm:active, .mint-msgbox-btn.mint-msgbox-cancel:active {
    color: rgba(227, 193, 67, 1)
  }

  .mint-header {
    color: rgba(227, 193, 67, 1)
  }

  .bg-white {
    background-color: #fff !important;
  }

  .bg-gray {
    background-color: #efeff4 !important;
  }
  .turn-on {
    &-enter {
       transform: translate3d(100%, 0, 0);
     }
    &-leave-to {
       transform: translate3d(-20%, 0, 0);
     }
    &-enter-active, &-leave-active  {
        transition: transform .4s ease;
    }
  }
  .turn-off {
    &-enter {
      transform: translate3d(-20%, 0, 0);
    }
    &-leave-to {
      transform: translate3d(100%, 0, 0);
    }
    &-leave-active {
      z-index: 2;
    }
    &-enter-active, &-leave-active  {
      transition: transform .4s ease;
    }
  }
  /*处理滚动穿透*/
  .p-fixed{position: fixed !important;}
</style>
